<template>
  <view class="book-now-page">
    <!-- 维修方式 -->
    <view class="section">
      <view class="section-title">维修方式</view>
      <view class="repair-methods">
        <view 
          class="method-item" 
          :class="{ 'active': repairMethod === 'store' }"
          @click="selectRepairMethod('store')"
        >
          <view class="radio-btn" :class="{ 'checked': repairMethod === 'store' }">
            <view class="radio-inner" v-if="repairMethod === 'store'"></view>
          </view>
          <text class="method-text">到店维修</text>
        </view>
        <view 
          class="method-item" 
          :class="{ 'active': repairMethod === 'pickup' }"
          @click="selectRepairMethod('pickup')"
        >
          <view class="radio-btn" :class="{ 'checked': repairMethod === 'pickup' }">
            <view class="radio-inner" v-if="repairMethod === 'pickup'"></view>
          </view>
          <text class="method-text">上门取车</text>
        </view>
      </view>
    </view>
    
    <!-- 客户信息 -->
    <view class="section">
      <view class="section-title">客户信息</view>
      <view class="form-group">
        <view class="form-item">
          <text class="label">车主姓名</text>
          <input 
            type="text" 
            placeholder="请输入车主姓名" 
            v-model="customerInfo.name"
            class="input"
          />
        </view>
        <view class="form-item">
          <text class="label">联系方式</text>
          <input 
            type="text" 
            placeholder="请输入联系方式" 
            v-model="customerInfo.phone"
            class="input"
          />
        </view>
        <view class="form-item">
          <text class="label">预约时间</text>
          <picker 
            mode="date" 
            :value="customerInfo.appointmentDate" 
            @change="onDateChange"
            class="picker"
          >
            <view class="picker-text" :class="{ 'placeholder': !customerInfo.appointmentDate }">
              {{ customerInfo.appointmentDate || '请选择时间' }}
            </view>
          </picker>
        </view>
        <!-- 上门取车时显示取车位置 -->
        <view class="form-item" v-if="repairMethod === 'pickup'">
          <text class="label">取车位置</text>
          <input 
            type="text" 
            placeholder="请输入取车位置" 
            v-model="customerInfo.pickupLocation"
            class="input"
          />
        </view>
      </view>
    </view>
    
    <!-- 车辆信息 -->
    <view class="section">
      <view class="section-title">车辆信息</view>
      <view class="form-group">
        <view class="form-item">
          <text class="label">车辆类型</text>
          <picker 
            mode="selector" 
            :range="vehicleTypes" 
            :value="vehicleTypeIndex"
            @change="onVehicleTypeChange"
            class="picker"
          >
            <view class="picker-text" :class="{ 'placeholder': vehicleTypeIndex === -1 }">
              {{ vehicleTypeIndex >= 0 ? vehicleTypes[vehicleTypeIndex] : '请选择' }}
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">车牌号</text>
          <input 
            type="text" 
            placeholder="请输入车牌号" 
            v-model="vehicleInfo.plateNumber"
            class="input"
          />
        </view>
      </view>
    </view>
    
    <!-- 照片上传 -->
    <view class="section">
      <view class="section-title">照片</view>
      <view class="photo-upload">
        <view class="photo-item">
          <view class="upload-box" @click="uploadPhoto('full')">
            <text class="upload-icon">+</text>
            <text class="upload-text">上传照片</text>
          </view>
          <text class="photo-label">整车照片</text>
        </view>
        <view class="photo-item">
          <view class="upload-box" @click="uploadPhoto('repair')">
            <text class="upload-icon">+</text>
            <text class="upload-text">上传照片</text>
          </view>
          <text class="photo-label">维修部位照片</text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitBooking">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeInfo: {
        name: "伟业汽车维修厂(人民路店)",
        phone: "18893029302"
      },
      repairMethod: 'pickup', // 维修方式：store-到店维修，pickup-上门取车
      customerInfo: {
        name: '',
        phone: '',
        appointmentDate: '',
        pickupLocation: '' // 新增取车位置字段
      },
      vehicleTypes: ['轿车', 'SUV', 'MPV', '货车', '其他'],
      vehicleTypeIndex: -1,
      vehicleInfo: {
        plateNumber: ''
      },
      photos: {
        full: '',
        repair: ''
      }
    }
  },
  
  onLoad(options) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '立即预约'
    });
				
    // 接收传递的门店信息
    if (options.storeData) {
      try {
        const storeData = JSON.parse(decodeURIComponent(options.storeData));
        this.storeInfo = { ...this.storeInfo, ...storeData };
      } catch (e) {
        console.error('解析门店数据失败：', e);
      }
    }
  },
  
  methods: {
    // 选择维修方式
    selectRepairMethod(method) {
      this.repairMethod = method;
    },
    
    // 日期选择
    onDateChange(e) {
      this.customerInfo.appointmentDate = e.detail.value;
    },
    
    // 车辆类型选择
    onVehicleTypeChange(e) {
      this.vehicleTypeIndex = e.detail.value;
    },
    
    // 上传照片
    uploadPhoto(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.photos[type] = res.tempFilePaths[0];
          console.log('照片上传成功:', res.tempFilePaths[0]);
        },
        fail: (err) => {
          console.error('照片上传失败:', err);
          uni.showToast({
            title: '照片上传失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 提交预约
    submitBooking() {
      // 表单验证
      if (!this.customerInfo.name.trim()) {
        uni.showToast({
          title: '请输入车主姓名',
          icon: 'none'
        });
        return;
      }
      
      if (!this.customerInfo.phone.trim()) {
        uni.showToast({
          title: '请输入联系方式',
          icon: 'none'
        });
        return;
      }
      
      if (!this.customerInfo.appointmentDate) {
        uni.showToast({
          title: '请选择预约时间',
          icon: 'none'
        });
        return;
      }
      
      if (this.repairMethod === 'pickup' && !this.customerInfo.pickupLocation.trim()) {
        uni.showToast({
          title: '请输入取车位置',
          icon: 'none'
        });
        return;
      }
      
      if (this.vehicleTypeIndex === -1) {
        uni.showToast({
          title: '请选择车辆类型',
          icon: 'none'
        });
        return;
      }
      
      if (!this.vehicleInfo.plateNumber.trim()) {
        uni.showToast({
          title: '请输入车牌号',
          icon: 'none'
        });
        return;
      }
      
      // 构建预约数据
      const bookingData = {
        storeInfo: this.storeInfo,
        repairMethod: this.repairMethod,
        customerInfo: this.customerInfo,
        vehicleInfo: {
          type: this.vehicleTypes[this.vehicleTypeIndex],
          plateNumber: this.vehicleInfo.plateNumber
        },
        photos: this.photos,
        createTime: new Date().toISOString()
      };
      
      console.log('预约数据:', bookingData);
      
      // 跳转到预约成功页面
      uni.navigateTo({
        url: `/pages/bookSuccess/bookSuccess?bookingData=${encodeURIComponent(JSON.stringify(bookingData))}`,
        success: () => {
          console.log('跳转到预约成功页面成功');
        },
        fail: (err) => {
          console.error('跳转到预约成功页面失败：', err);
          // 如果跳转失败，显示成功提示并返回
          uni.showToast({
            title: '预约提交成功',
            icon: 'success'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      });
    }
  }
}
</script>

<style scoped>
.book-now-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 通用section样式 */
.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

/* 维修方式 */
.repair-methods {
  display: flex;
  gap: 40rpx;
}

.method-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-btn {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  margin-right: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-btn.checked {
  border-color: #007AFF;
  background-color: #007AFF;
}

.radio-inner {
  width: 20rpx;
  height: 20rpx;
  background-color: #fff;
  border-radius: 50%;
}

.method-text {
  font-size: 28rpx;
  color: #333;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
}

.picker {
  flex: 1;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.picker-text.placeholder {
  color: #999;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 照片上传 */
.photo-upload {
  display: flex;
  gap: 30rpx;
}

.photo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-box {
  width: 200rpx;
  height: 200rpx;
  background-color: #f8f8f8;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  cursor: pointer;
}

.upload-icon {
  font-size: 60rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.photo-label {
  font-size: 26rpx;
  color: #666;
}

/* 提交按钮 */
.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  z-index: 100;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
